<template>
<div style="border:solid #ECEFF1;width:70%;border-width:1px;">
    <i-form>
    <app-form-item style="margin-left:6px;margin-top:12px;margin-right:6px">
        <input-box 
            v-model="data.formitem"  
            @enter="onEnter($event)"  
            unit=""  
            :disabled="detailsModel.formitem.disabled" 
            type='text' 
            style=""
            placeholder="输入标题，回车创建">
        </input-box>
    </app-form-item>

    <app-form-item>
        <v-icon medium>
            mdi-account
        </v-icon>
        <el-dropdown trigger="click" placement="bottom-start" @command="handleCommandPrincipal" class="ml-1">
            <span class="el-dropdown-link">
                {{principal?principal:'请选择负责人'}}
            </span>
            <el-dropdown-menu slot="dropdown">
                <el-dropdown-item v-for="item in options" :key="item.value" :command="item.value">
                    <v-avatar size="25"  style="margin-right: 7px">
                        <img src="https://avatar-alioss.tower.im/default_avatars/winter.jpg" alt="简学云">
                    </v-avatar>
                    {{item.value}}
                </el-dropdown-item>
            </el-dropdown-menu>
            </el-dropdown>
    </app-form-item>

    <app-form-item>
        <v-icon medium>
            mdi-calendar-check
        </v-icon>

        <el-dropdown trigger="click" placement="bottom-start" class="ml-1">
            <span class="el-dropdown-link">
              {{picker?picker:'设置截止时间'}}
            </span>
            <el-dropdown-menu slot="dropdown">
                <el-dropdown-item>
                    <v-date-picker v-model="picker"></v-date-picker>
                </el-dropdown-item>
            </el-dropdown-menu>
            </el-dropdown>
    </app-form-item>

    <app-form-item>
        <v-icon medium>mdi-alert</v-icon>
        <el-dropdown trigger="click" placement="bottom-start" @command="handleCommandRank" class="ml-1">
            <span class="el-dropdown-link">
              <v-btn
                small
                color="green"
                dark
                >
                {{value}}
            </v-btn>
            </span>
            <el-dropdown-menu slot="dropdown">
                <el-dropdown-item v-for="item in rank" :key="item.value" :command="item.value">
                    <v-icon style="transform:translateY(25%);">mdi-checkbox-blank-outline</v-icon>
                    <span>{{item.label}}</span>
                </el-dropdown-item>
            </el-dropdown-menu>
            </el-dropdown>
    </app-form-item>

    <app-form-item>
        <v-icon medium>mdi-lead-pencil</v-icon>
        <el-dropdown size="small" placement="bottom" trigger="click" @command="batchOperate"
            class="ml-1"
          >
          <div v-if="tags.length>0">
           <el-tag
                v-for="tag in tags"
                :key="tag.name"
                closable
                :type="tag.type"
                @close="handleClose(tag)"
                effect="dark"
                class="mr-1"
               >
                {{tag.name}}
            </el-tag>
        </div>
        <div v-else>添加任务标签</div>
           <el-dropdown-menu slot="dropdown">
             <el-dropdown-item command="处理中;success" style="margin:5px">
                 <el-tag type="success" effect="dark">处理中</el-tag>
               </el-dropdown-item>
             <el-dropdown-item command="待检验;warning" style="margin:5px">
                 <el-tag type="warning" effect="dark">待检验</el-tag>
                 </el-dropdown-item>
            <el-dropdown-item command="问题;danger" style="margin:5px">
                 <el-tag type="danger" effect="dark">问题</el-tag>
                 </el-dropdown-item>
            <el-dropdown-item command="需求" style="margin:5px">
                 <el-tag effect="dark">需求</el-tag>
                 </el-dropdown-item>
           </el-dropdown-menu>
         </el-dropdown>
        
    </app-form-item>

    <app-form-item>
       <v-icon medium>mdi-file-check-outline</v-icon>
            <v-textarea
          outlined
          name="input-7-4"
          auto-grow
          placeholder="输入任务描述">
          </v-textarea>
    </app-form-item>

    <app-form-item>
        <v-icon medium>
            mdi-attachment
        </v-icon>
        <el-upload
                class="upload-demo"
                :action="uploadUrl"
                :on-change="handleChange"
                :on-preview="handlePreview"
                :file-list="fileList">
                <a class="row-link" style="color:gray">上传新附件</a>
                    </el-upload>
    </app-form-item>
    <app-form-item>
        <v-btn
      depressed
      small
      class="ml-5 mr-2"
      style="background-color:#44acb6;color:white;"
    >
      创建任务
    </v-btn>

    <v-btn
      depressed
      color="white"
      small
    >
      取消
    </v-btn>
    </app-form-item>
</i-form>
</div>
</template>
<script lang='tsx'>
import {  Vue,Component } from 'vue-property-decorator';

 
@Component({
    components: {
         
    }
})
export default class AddTaskForm extends Vue{

public options:any = [{value: 'Option1',label: 'Option1'}]

        public rank:any = [{value: '最高',label: '最高',color:'red'},{value: '较高',label: '较高',color:'yellow'},{value: '普通',label: '普通',color:'gray'},{value: '较低',label: '较低',color:'green'}]

        public tags:any = []
        public principal:any = "";
        public picker:any = "";

        public value:any = "普通"

        public handleCommandPrincipal(command:any){
            this.principal = command;
        }

        public handleCommandRank(command:any){
            this.value = command;
        }

        public batchOperate(command:any){
            if(command.indexOf(";")!=-1) this.tags.push({name: command.substring(0,command.indexOf(";")),type:command.substring(command.indexOf(";")+1)});

            else this.tags.push({name: command,type:""});
        }

        public handleClose(tag:any) {
            for(let i = 0;i < this.tags.length;i++){
                if(this.tags[i].name == tag.name){
                    this.tags.splice(i,1)
                }
            }
      }
/**
     * 文件列表
     */
    public fileList:any =  [];

    /**
     * el-file 文件状态改变时
     * @param file
     * @param fileList
     */
    public handleChange(file:any, fileList:any) {
        this.fileList = fileList.slice(-3);
    }
}
</script>